<template>
    <p>{{props.msg}}</p>
    <button @click="handleClick">点击我调用父组件方法</button>
    <p>{{originData.count}}  {{originData.user.name}}</p>
    <p v-for="(item, index) in originData.arr" :key="index">{{item}}</p>
    <button @click="incriment">点击我count增加</button>
</template>
<script setup lang="ts">
    import { ref, reactive, watchEffect, watch } from 'vue';

    const count = ref(0)
    const user = reactive({name: '张三'})
    const arr = reactive([1,2,3,4])

    // 综合定义方案
    const originData = reactive({
        count: 0,
        user:{
            name: '张三'
        },
        arr:[1,2,3,4]
    })

    // watchEffect(()=> console.log(count.value))
    // 单个变量
    // watch(count, (n, o)=> console.log(n, o))
    // 监听多个变量变化
    // watch([count,originData.user], (n, o)=> console.log(n[0],n[1].name))
    // 页面加载完成就执行监听
    watch([count,originData.user], (n, o)=> {console.log(n[0],n[1].name)}, {deep: true, immediate: true})

    const incriment = ()=>{
        originData.count++
        originData.user.name = '李四'
        count.value++
    }

    const props = defineProps({
        msg: {
            type: String,
            default: ()=> '默认值'
        }
    })

    const emit = defineEmits(['on-change'])
    const handleClick = ()=>{
        emit('on-change', '父组件方法被调用了')
    }

    const childNode = ()=>{
        // console.log('子组件方法被调用了');
    }

    defineExpose({
        child: '我是暴露的子组件',
        childNode
    })
</script>